<template>
  <ul class="side-bar">
    <li v-for="(item, index) in list" :key="index">
      <a href="#" class="label">{{ item.name }}</a>
      <div class="detail-list">
        <ul>
          <li v-for="(item, index) in item.detailList" :key="index">
          <a href="javascirpt:'">
            <img :src="item.imgUrl" alt="">
             {{ item.label }}
          </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<script>
import { reactive } from "vue";

export default {
  name: "SideBar",
  setup() {
    const list = reactive([
      {
        name: "手机",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/1.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/2.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/3.webp'),
          label: "小鑫手机4s"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/4.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/5.webp'),
          label: "小鑫手机4s"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/6.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/7.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/8.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/9.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/10.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/11.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/12.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/13.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/14.webp'),
          label: "小鑫手机4s"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/手机/15.webp'),
          label: "小鑫手机4s"
          },

        ],
      },
      {
        name: "电视",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/1.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/2.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/3.webp'),
          label: "小鑫电视"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/4.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/5.webp'),
          label: "小鑫电视"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/6.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/7.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/8.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/9.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/10.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/11.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/12.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/4.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/5.webp'),
          label: "小鑫电视"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电视/8.webp'),
          label: "小鑫电视"
          },
        ],
      },
      {
        name: "笔记本 平板",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/1.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/2.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/3.webp'),
          label: "小鑫平板"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/4.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/5.webp'),
          label: "小鑫平板"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/6.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/7.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/8.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/9.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/10.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/11.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/12.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/13.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/14.webp'),
          label: "小鑫平板"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/笔记本or平板/15.webp'),
          label: "小鑫平板"
          },

        ],
      },
      {
        name: "家电",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/1.jpg'),
          label: "小鑫家电"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/2.jpg'),
          label: "小鑫家电"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/3.jpg'),
          label: "小鑫家电"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/4.jpg'),
          label: "小鑫家电"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/5.jpg'),
          label: "小鑫家电"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/6.jpg'),
          label: "小鑫家电"
          }
          ,
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/3.jpg'),
          label: "小鑫家电"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/4.jpg'),
          label: "小鑫家电"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/5.jpg'),
          label: "小鑫家电"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/家电/6.jpg'),
          label: "小鑫家电"
          },
          
          

        ],
      },
      {
        name: "出行 穿戴",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/1.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/2.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/3.webp'),
          label: "小鑫出行"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/4.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/5.webp'),
          label: "小鑫出行"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/6.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/1.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/2.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/3.webp'),
          label: "小鑫出行"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/4.webp'),
          label: "小鑫出行"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/5.webp'),
          label: "小鑫出行"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/出行or穿戴/6.webp'),
          label: "小鑫出行"
          }

        ],
      },
      {
        name: "智能 路由器",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/1.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/2.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/3.webp'),
          label: "小鑫路由器"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/4.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/5.webp'),
          label: "小鑫路由器"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/6.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/1.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/2.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/3.webp'),
          label: "小鑫路由器"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/4.webp'),
          label: "小鑫路由器"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/5.webp'),
          label: "小鑫路由器"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/智能路由器/6.webp'),
          label: "小鑫路由器"
          }

        ],
        
      },
      {
        name: "电源 配件",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/1.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/2.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/3.jpg'),
          label: "小鑫配件"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/4.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/5.jpg'),
          label: "小鑫配件"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/6.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/1.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/2.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/3.jpg'),
          label: "小鑫配件"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/4.jpg'),
          label: "小鑫配件"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/电源配件/5.jpg'),
          label: "小鑫配件"
          },

        ],

      },
      {
        name: "健康 儿童",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/1.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/2.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/3.jpg'),
          label: "小鑫健康"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/4.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/5.jpg'),
          label: "小鑫健康"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/6.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/1.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/2.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/3.jpg'),
          label: "小鑫健康"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/4.jpg'),
          label: "小鑫健康"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/健康儿童/5.jpg'),
          label: "小鑫健康"
          },

        ],
      },
      {
        name: "耳机 音箱",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/1.webp'),
          label: "小鑫耳机or音箱"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/2.webp'),
          label: "小鑫耳机or音箱"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/3.webp'),
          label: "小鑫耳机or音箱"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/4.webp'),
          label: "小鑫耳机or音箱"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/5.webp'),
          label: "小鑫耳机or音箱"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/6.webp'),
          label: "小鑫耳机or音箱"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/4.webp'),
          label: "小鑫耳机or音箱"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/耳机or音箱/3.webp'),
          label: "小鑫耳机or音箱"
          },

          

        ],
      },
      {
        name: "生活 箱包",
        detailList: [
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/1.jpg'),
          label: "小鑫箱包"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/2.jpg'),
          label: "小鑫箱包"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/3.jpg'),
          label: "小鑫箱包"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/4.jpg'),
          label: "小鑫箱包"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/5.jpg'),
          label: "小鑫箱包"
          },

          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/6.jpg'),
          label: "小鑫箱包"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/4.jpg'),
          label: "小鑫箱包"
          },
          {
          imgUrl: require('../../../assets/images/main/hd/side-bar/生活箱包/5.jpg'),
          label: "小鑫箱包"
          },

        ],
      },
    ]);
    return {
      list
    };
  },
};
</script>

<style lang="less" scoped>
.side-bar {
  position: relative;
  float: left;
  padding-top: 25px;
  width: 234px;
  height: 460px;
  background-color: rgba(105, 101, 101, 0.6);
  li {
    &:hover .detail-list {
      display: block;
    }
   .label {
      display: block;
      padding: 10px 20px;
      color: white;
      cursor: pointer;
      &:hover {
        background-color: #409eff;
      }
      &::after {
        content: ">";
        float: right;
      }
    }
    .detail-list {
      display: none;
      z-index: 999;
      position: absolute;
      top: 0;
      left: 234px;
      height: 460px;
      background-color: white;
      ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 800px;
        height: 460px;
        li {
          padding: 18px 20px;
          width: 265px;
          height: 76px;
          a {
            display: block;
            color: black;
            font-size: 14px;
            &:hover {
              color: #409eff;
            }
             img {
             vertical-align: middle;
             }
          }
         
        }
      }
    }
  }
}
</style>